﻿@model BlogPostModel
@using Grand.Web.Models.Blogs;
@{
    Layout = "_ColumnsTwo";

    //title
    Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Title);
    Html.AddMetaDescriptionParts(Model.MetaDescription);
    Html.AddMetaKeywordParts(Model.MetaKeywords);
}
@section left {
    @await Component.InvokeAsync("Widget", new { widgetZone = "left_side_column_blog_before" })
    @await Component.InvokeAsync("BlogCategories")
    @await Component.InvokeAsync("Widget", new { widgetZone = "left_side_column_before_blog_archive" })
    @await Component.InvokeAsync("BlogMonths")
    @await Component.InvokeAsync("Widget", new { widgetZone = "left_side_column_after_blog_archive" })
    @await Component.InvokeAsync("BlogTags")
    @await Component.InvokeAsync("Widget", new { widgetZone = "left_side_column_blog_after" })
}
<div class="page blogpost-page">
    @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_top", additionalData = Model.Id })
    <a class="js-offcanvas-trigger blog-filter filter-button btn btn-outline-info d-lg-none d-flex mb-3" data-offcanvas-trigger="leftSide" href="#leftSide"><span class="mdi mdi-tune"></span><span class="ml-3">@T("Blog") @T("catalog.selectors.fiters")</span></a>
    <div class="card border-0 px-0 pb-3 pt-0">
        @if (!string.IsNullOrEmpty(Model.PictureModel.ImageUrl))
        {
            <div class="img-container mt-3">
                <img class="card-img-top img-fluid" alt="@Model.PictureModel.AlternateText" src="@Model.PictureModel.ImageUrl" title="@Model.PictureModel.Title">
            </div>
        }
        <h4 class="card-header generalTitle h2 border-bottom-0 ml-0 py-0">@Model.Title</h4>
        <div class="card-body px-0 pt-0">
            <div class="post-date generalMarginSupporter text-muted">
                <div class="d-inline-flex align-items-center"><span class="mdi mdi-alarm mr-2"></span><strong>@Model.CreatedOn.ToString("D")</strong></div>
            </div>
            @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_before_body", additionalData = Model.Id })
            <div class="post-body">
                @Html.Raw(Model.Body)
            </div>
        </div>
    </div>

    @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_before_products", additionalData = Model.Id })
    
    @await Component.InvokeAsync("BlogPostProducts", new { blogPostId = Model.Id })

    @if (Model.Tags.Any())
    {
        <div class="tags generalMarginSupporter">
            <label>@T("Blog.Tags"):</label>
            @for (int i = 0; i < Model.Tags.Count; i++)
            {
                var tag = Model.Tags[i];
                <a class="btn btn-secondary" href="@Url.RouteUrl("BlogByTag", new {tag = tag})">@tag</a>
            }
        </div>
    }

    @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_before_comments", additionalData = Model.Id })
    @if (Model.AllowComments)
    {
        <div class="fieldset new-comment generalMarginSupporter" id="comments">
            <h4 class="generalTitle generalMarginSupporter">@T("Blog.Comments.LeaveYourComment")</h4>
            <div class="notifications">
                <div asp-validation-summary="ModelOnly" class="message-error"></div>
                @{
                    var result = TempData["Grand.blog.addcomment.result"] as string;
                }
                @if (!String.IsNullOrEmpty(result))
                {
                    <div class="result card bg-info p-3 text-white">@result</div>
                }
            </div>
            <form asp-route="BlogPost" asp-route-sename="@Model.SeName" method="post">
                <div class="form-fields">
                    <div class="form-group">
                        <label asp-for="AddNewComment.CommentText" class="col-form-label">@T("Blog.Comments.CommentText"):</label>
                        <textarea asp-for="AddNewComment.CommentText" class="enter-comment-text form-control"></textarea>
                        <span asp-validation-for="AddNewComment.CommentText"></span>
                    </div>
                    @if (Model.AddNewComment.DisplayCaptcha)
                    {
                        <div class="captcha-box">
                            <captcha />
                        </div>
                    }
                </div>
                <div class="buttons text-xs-center text-md-left generalMarginSupporter">
                    <input type="submit" name="add-comment" class="btn btn-info blog-post-add-comment-button" value="@T("Blog.Comments.SubmitButton")" />
                </div>
            </form>
        </div>
        if (Model.Comments.Any())
        {
            <div class="comment-list">
                <h4 class="generalTitle generalMarginSupporter"><strong>@T("Blog.Comments")</strong></h4>
                <div class="comments">
                    @foreach (var comment in Model.Comments)
                    {
                        <div class="card comment blog-comment text-center text-sm-left">
                            @if (comment.AllowViewingProfiles)
                            {
                                <h5 class="card-header"><a href="@Url.RouteUrl("CustomerProfile", new {id = comment.CustomerId})" class="username">@(comment.CustomerName)</a></h5>
                            }
                            else
                            {
                                <h5 class="username card-header">@(comment.CustomerName)</h5>
                            }
                            <div class="card-body row">
                                @if (!String.IsNullOrEmpty(comment.CustomerAvatarUrl))
                                {
                                    <div class="col-12 col-xl-2 col-lg-3 col-sm-4 col-md-3 d-flex justify-content-center user-info">
                                        <div class="avatar">
                                            @if (comment.AllowViewingProfiles)
                                            {
                                                <a href="@Url.RouteUrl("CustomerProfile", new {id = comment.CustomerId})" class="avatar-img-link">
                                                    <img src="@(comment.CustomerAvatarUrl)" class="avatar-img" alt="avatar" />
                                                </a>
                                            }
                                            else
                                            {
                                                <img src="@(comment.CustomerAvatarUrl)" class="avatar-img" alt="avatar" />
                                            }
                                        </div>
                                    </div>
                                }
                                <div class="col-12 col-sm-9 comment-content">
                                    <div class="comment-time">
                                        <label>@T("Blog.Comments.CreatedOn"):</label>
                                        <span class="stat-value">@comment.CreatedOn.ToString("g")</span>
                                    </div>
                                    <div class="comment-body text-center text-sm-left">
                                        @Html.Raw(Grand.Core.Html.HtmlHelper.FormatText(comment.CommentText, false, true, false, false, false, false))
                                    </div>
                                </div>
                                @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_inside_comment", additionalData = comment.Id })
                            </div>
                        </div>
                    }
                </div>
            </div>
        }
    }
    @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_after_comments", additionalData = Model.Id })
    @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_bottom", additionalData = Model.Id })
</div>
